<template>
  <div>
    <div class="nav">
      <van-nav-bar title="视频详情" left-arrow @click-left=back>
      </van-nav-bar>
    </div>

    <div class="video-content">
      <video controls :poster="data.cover" :src="url"></video>
    </div>
    <div class="tab">
      <van-tabs v-model="activeName" line-width="90">
        <van-tab title="简介" name="a">
          <div class="detail">
            <div class="top">
              <div class="img-box">
                <img src="@/assets/news.png" alt="" />
              </div>
              <h2>{{ data.title }}</h2>
            </div>
            <div class="center">
              <div
                class="type"
                v-for="(item, index) in data.categories"
                :key="index"
              >
                <span>{{ item.category_name }}</span>
                <span>{{ item.sub.category_name }}</span>
              </div>
              <div class="time">
                <span>{{
                  new Date(data.publish_time * 1000)
                    .toLocaleString()
                    .replace(/\//g, "-")
                }}</span>
              </div>

              <div class="show">
                <span>{{ data.count.count_view }}次播放</span>
              </div>
            </div>
            <div class="bottom">
              <div class="int">
                <p>{{ data.content }}</p>
              </div>
            </div>
            <div class="icon">
              <div class="recommend-list">
                <ul class="list">
                  <li>
                    <div>
                      <a href="javascript:;">
                        <img src="@/assets/dz.png" alt="" />
                        <span>{{ data.count.count_like }}</span>
                      </a>
                    </div>
                  </li>
                  <li>
                    <div>
                      <a href="javascript:;">
                        <img src="@/assets/sc.png" alt="" />
                        <span>{{ data.count.count_collect }}</span>
                      </a>
                    </div>
                  </li>
                  <li>
                    <div>
                      <a href="javascript:;">
                        <img src="@/assets/fx.png" alt="" />
                        <span>{{ data.count.count_share }}</span>
                      </a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <section class="card-list">
            <h2>相似视频</h2>
            <ul class="card-list-ul">
              <li
                v-for="(item, i) in similarData"
                :key="i"
                @click="similarToVideo(item.id)"
              >
                <div class="left">
                  <img :v-lazy="item.cover" alt="" />
                </div>
                <div class="right">
                  <div class="top">
                    <h3>{{ item.title }}</h3>
                  </div>
                  <div class="center">
                    <span>播放 {{ item.count.count_view }}次</span>
                    <span>喜欢 {{ item.count.count_like }}</span>
                  </div>
                  <div class="bottom">
                    <img :src="item.author.userinfo.avatar" alt="" />
                    <span>{{ item.author.userinfo.username }}</span>
                    <img
                      src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/09/055d70f8a79a45b.png"
                      alt=""
                      class="vip"
                      v-if="item.author.userinfo.vip_flag === 1"
                    />
                  </div>
                </div>
              </li>
            </ul>
          </section>
        </van-tab>
        <van-tab title="评论" name="b">
          <div class="comment">
            <ul class="comment-list">
              <li v-for="(item, i) in commentData" :key="i">
                <div class="left">
                  <img :src="item.userInfo.avatar" alt="" />
                </div>
                <div class="right">
                  <div class="top">
                    <span>{{ item.userInfo.username }}</span>
                    <van-icon name="ellipsis"></van-icon>
                  </div>
                  <div class="center">
                    <p>{{ item.content }}</p>
                  </div>
                  <div class="bottom">
                    <div class="bottom-left">
                      <span>{{
                        new Date(item.addtime * 1000).toLocaleString()
                      }}</span>
                      <span>{{ item.ip_location }}</span>
                    </div>
                    <div class="bottom-right">
                      <van-icon name="comment-o" size="16"></van-icon>
                      <van-icon name="good-job-o" size="16">{{
                        item.count_approve
                      }}</van-icon>
                    </div>
                  </div>
                </div>
              </li>
             
            </ul>
            <li class="flag" v-if="flag">内容空空如也，快去发表评论吧</li>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  data() {
    return {
      activeName: "a",
      active: 0,
      data: {
        count: {},
      },
      similarData: [],
      url: "",
      commentData: [],
      flag:true,
      page: 1,
    };
  },
  methods: {
    getData(id) {
      axios({
        url: `https://apis.netstart.cn/xpc/article/${id}`,
        params: {
          // id
        },
        method: "get",
      }).then((res) => {
        this.data = res.data.data;
        this.url = this.data.video.content.progressive[0].url;
      });
    },
    getSimilarVideo(id) {
      axios({
        url: `https://apis.netstart.cn/xpc/article/${id}/next`,
        method: "get",
      }).then((result) => {
        this.similarData = result.data.data.list;
      });
    },
    similarToVideo(id) {
      this.$router.push({
        path: "/Video",
        query: {
          id: id,
        },
      });
      this.getData(id);
      this.getSimilarVideo(id);
      this.getComment(id);
    },
    getComment(id,page) {
      axios({
        url: "https://apis.netstart.cn/xpc/comments",
        params: {
          resource_id: id,
          page:1,
        },
        method: "get",
      }).then((res) => {
        this.flag=true;
        if (res.data.data.list.length > 0) {
         this.flag = false;
        }
        this.commentData = res.data.data.list;
        console.log(this.commentData);
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
  watch: {
    $route(n, o) {
      if (n.fullPath !== o.fullPath) {
        //监听路由参数是否变化
        //如果发生变化，重新实例化页面
        location.reload();
      }
    },
  },
  mounted() {
    this.getData(this.$route.query.id);
    this.getSimilarVideo(this.$route.query.id);
    this.getComment(this.$route.query.id,6);
  },
};
</script>
<style lang="scss">
.flag{
  width: 100%;
  line-height: 80px;
  text-align: center;
  flex-basis: center;
  list-style: none;
  margin-top: 100px;
}
body {
  background-color: #fff;
}
.nav {
  background-color: #f4f4f4;
  .van-nav-bar {
    height: 12.2657vw;

    .van-nav-bar__content {
      height: 12.2657vw;
      .van-nav-bar__left {
        height: 12.2657vw;
        width: 12.2657vw;
        .van-icon {
          font-size: 5.13285vw;
          color: #2c2c2c;
        }
      }
      .van-nav-bar__title {
        height: 12vw;
        line-height: 12vw;
      }
    }
    .van-nav-bar__title {
      font-size: 32px;
    }
    .van-nav-bar__right {
      right: 10px;
    }
  }
}
.video-content {
  width: 100%;
  video {
    width: 100%;
    height: 48.667vw;
    object-fit: fill”;
  }
}
.tab {
  .van-tabs {
    height: 10.2657vw;
  }
  .van-tabs__wrap {
    height: 10.2657vw;
    line-height: 12.2657vw;
    font-size: 32px;
    color: #2c2c2c;
    span {
      font-size: 32px;
      display: inline-block;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  }
  .van-tabs__line {
    height: 0.2657vw;
    background-color: #ff6034;
  }
}
.detail {
  margin-left: 20px;
  margin-top: 20px;
  .top {
    display: flex;

    .img-box {
      background: #fff;
      display: flex;
      padding: 10px;
      img {
        height: 9.8696vw;
        width: 9.8696vw;
      }
    }
    h2 {
      font-size: 36px;
      font-weight: bold;
      line-height: 11.8696vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 15px;
    }
  }
  .center {
    display: flex;
    line-height: 40px;
    .type {
      span {
        font-size: 24px;
        color: #999999;
        margin-right: 10px;
      }
    }
    .time {
      span {
        font-size: 24px;
        color: #999999;
        margin-right: 10px;
      }
    }
    .show {
      span {
        font-size: 24px;
        color: #999999;
        margin-right: 10px;
      }
    }
  }
  .bottom {
    .int {
      p {
        font-size: 12px;
        margin-top: 20px;
      }
    }
  }
  .icon {
    // height: 400px;
    .recommend-list {
      width: 94.686vw;
      margin-left: 10px;
      margin-top: 4.1063vw;
      .list {
        display: flex;
        justify-content: space-between;
        li {
          div {
            width: 18.1159vw;
            height: 21.256vw;
            box-sizing: border-box;
            padding: 20px;
            justify-content: center;
            align-items: center;
            a {
              display: flex;
              flex-direction: column;
              img {
                width: 7.971vw;
                height: 7.971vw;
                padding: 0 2.5401vw;
              }
              span {
                margin-top: 2.657vw;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .title-nav {
      display: flex;
      justify-content: space-between;
      margin-top: 2.4155vw;
      width: 94.4444vw;
      h2 {
        margin-left: 2.4155vw;
      }
      span {
        color: #e4393c;
      }
    }
    .nav-list {
      width: 94.4444vw;
      margin-left: 2.4155vw;
      margin-top: 3.8309vw;
      .nav-list-bar {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          margin-bottom: 2.4155vw;
          border-radius: 20px;
          overflow: hidden;
        }
        img {
          width: 45.1691vw;
          height: 31.8841vw;
        }
        span {
          position: absolute;
          top: 2.4155vw;
          left: 2.4155vw;
          font-size: 3.9444vw;
        }
      }
    }
  }
}
.card-list {
  padding-bottom: 60px;
  height: 500px;
  h2 {
    margin-bottom: 40px;
    margin-left: 20px;
  }
  .card-list-ul {
    li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .left {
        width: 40.0966vw;
        height: 24.1546vw;
        overflow: hidden;
        border-radius: 15px;
        margin-left: 10px;
        img {
          width: 37.0966vw;
          height: 24.1546vw;
        }
      }
      .right {
        width: 70%;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          h3 {
            font-size: 30px;
            font-weight: bold;
            line-height: 4.8696vw;
            margin-bottom: 10px;
          }
        }
        .center {
          span {
            font-size: 24px;
            color: #999999;
            margin-right: 10px;
          }
        }
        .bottom {
          display: flex;
          align-items: center;
          margin-top: 20px;
          img {
            height: 5.3696vw;
            width: 5.3696vw;
            border-radius: 50%;
            margin-right: 10px;
          }
          span {
            font-size: 24px;
            color: #999999;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.video-content {
  width: 100vw;
  height: 100%;
  video {
    width: 100%;
    height: 100%;
  }
}
.comment {
  padding-bottom: 60px;
  .comment-list {
    li {
      display: flex;
      padding: 20px;
      margin-bottom: 20px;
      .left {
        padding: 0 20px;
        img {
          width: 8.4541vw;
          height: 8.4541vw;
          border-radius: 50%;
        }
      }
      .right {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .top {
          color: #999999;
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
          font-size: 3.3816vw;
        }
        .center {
          font-size: 3.8478vw;
        }
        .bottom {
          display: flex;
          align-items: center;
          margin-top: 20px;
          justify-content: space-between;
          margin-bottom: 20px;
          .van-icon {
            margin-right: 25px;
          }
          span {
            font-size: 2.8986vw;
            color: #999999;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>